<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>
<style>
    body {
        min-width: 600px; /* 2x leftContent width + rightContent width */
        font-weight: bold;
        font-size: 20px;
    }

    #header, #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
        clear: both;
    }

    #container {
        padding: 0 200px;
        overflow: hidden;
    }

    .column {
        height: 200px;
        float: left;
        position: relative;
    }

    #left {
        width: 200px;
        margin-left: -100%;
        left: -200px;
        background-color: aqua;
    }

    #right {
        width: 200px;
        margin-left: -200px;
        right: -200px;
        background-color: wheat;
    }

    #center {
        width: 100%;
        background-color: tomato;
    }
</style>

<body>
<div id="header">#header</div>
<div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>

</html>